<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('公司名称')" prop="companyName">
            <el-input
              v-model="form.companyName"
              :placeholder="$t('公司名称')"
              show-word-limit
              maxlength="32"
              :disabled="true"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('用印类型')" prop="sealType">
            <dictSelect
              v-model="form.sealType"
              :clearable="true"
              dictionary="subject_type"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item :label="$t('用印主体')" prop="investId">
            <MainBodySelect
              v-model="form.investId"
              :parameters="form.sealType"
              :placeholder="$t('请选择')"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item :label="$t('印章管理员')" prop="sealManager">
            <UserSelect v-model="form.sealManager" :multiple="true" :placeholder="$t('请选择')" />
          </el-form-item>
        </el-col>

        <!--        <div slot="tip" class="el-upload__tip" style="color:red">-->
        <!--          <el-link type="primary" style="font-size:12px" @click="fetchTemplate">-->
        <!--            {{ $t('下载模板') }}-->
        <!--          </el-link>-->
        <!--        </div>-->
      </el-row>

      <el-col>
        <div class="demo-image" style="margin-top: 20px;">
          <div v-for="(item,index) in sealImgList" :key="index" class="block">
            <el-image
              style="width: 100px; height: 100px"
              :src="item.url"
            />
            <div class="demonstration">{{ item.name }}</div>
          </div>
        </div>
      </el-col>
    </el-form>

    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存 取消按钮-->
      <save-btn has-permi="oa:maintain" />
    </div>
  </div>
</template>

<script>
import {
  getOaElectronicSignatureMaintain,
  getSealByCompanyName,
  getSealInfoByInvestId,
  saveOaElectronicSignatureMaintain
} from '@/api/oa/maintain/oaElectronicSignatureMaintain'
import MainBodySelect from '@/components/MainBodySelect'
import { getUser } from '@/api/system/user'
export default {
  components: {
    MainBodySelect
  },
  data() {
    const checkInvest = (rule, value, callback) => {
      if (value === undefined || value === null || value === '') {
        callback(new Error(this.$t('必填信息')))
      } else {
        getSealInfoByInvestId(value).then(response => {
          if (this.form.id !== undefined && this.form.id !== null && this.form.id !== '') {
            if (response.data !== null && this.form.id !== response.data.id) {
              callback(new Error(this.$t('当前主体已经绑定到:') + response.data.companyName))
            } else {
              callback()
            }
          } else {
            if (response.data !== null) {
              callback(new Error(this.$t('该主体已经绑定到:') + response.data.companyName))
            } else {
              callback()
            }
          }
        })
      }
    }
    return {
      form: {
        companyName: undefined,
        sealType: undefined,
        investId: undefined
      },
      formLabelWidth: '120px',
      title: '',
      flag: false,
      urls: process.env.VUE_APP_BASE_API,
      sealImgList: [],
      // 遮罩层
      loading: false,
      disable: true,
      // 表单校验
      rules: {
        investId: [{ required: true, validator: checkInvest, trigger: ['blur', 'change'] }],
        sealType: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
        sealManager: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }]
      }
    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    changeName() {
      getUser(this.form.userId).then(response => {
        console.log(response)
        this.$set(this.form, 'postIds', response.datas.postIds)
        this.$set(this.form, 'deptId', response.datas.deptId)
      })
    },
    fetchTemplate() {

    },
    // 初始化数据
    init(data) {
      this.loading = true
      if (data != null && data.id !== undefined) {
        getOaElectronicSignatureMaintain(data.id).then(response => {
          console.log(response)
          this.form = response.data
          this.form.sealManager = JSON.parse(response.data.sealManager)
          // 加载印章图片
          this.loadSealImage(() => {
            this.loading = false
          })
        })
      } else {
        this.reset()
        this.loading = false
      }
    },
    /**
     * 加载印章图片,根据公司名称
     * @param callback
     */
    loadSealImage(callback) {
      getSealByCompanyName(this.form.companyName).then(response => {
        console.log(response)
        this.sealImgList = response.data
        callback()
      })
    },
    reset() {
      this.form = {
        id: undefined,
        companyName: undefined,
        sealType: undefined,
        investId: undefined,
        electronicSeal: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        delFlag: undefined
      }
      this.resetForm('form')
    },
    // 取消按钮
    cancel() {
      this.$parent.$parent.formOpen = false
      this.$parent.$parent.reset()
    },
    // 关闭form页面
    closeForm() {
      // 关闭form页面遮罩层
      this.loading = false
      // 关闭form页面
      if (this.$parent.$parent.formOpen !== undefined) {
        this.$parent.$parent.formOpen = false
      }
      // 刷新list页面
      if (this.$parent.$parent.getList !== undefined) {
        this.$parent.$parent.getList()
      }
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          this.form.sealManager = JSON.stringify(this.form.sealManager)
          saveOaElectronicSignatureMaintain(this.form).then(response => {
            console.log('保存成功')
            if (response.code === 200) {
              if (response.data.code === 200 || response.data.code === '200') {
                this.msgSuccess(this.$t('保存成功'))
                this.closeForm()
              } else {
                this.loading = false
                var that = this
                this.$confirm(this.$t(response.data.msg) + response.data.context, '提示', {
                  confirmButtonText: '好的',
                  type: 'warning',
                  dangerouslyUseHTMLString: true
                }).then(() => {
                  that.closeForm()
                }).catch(() => {
                  that.closeForm()
                })
              }
            } else {
              this.msgError(response.msg)
            }
            this.loading = false
          })
        } else {
          this.locationError(document)
        }
      })
    }
  }
}
</script>
<style scoped>
.block {
  display: inline-block;
  padding: 0 15px;
}

.demonstration {
  text-align: center;
}
</style>
